<template>
  <div id="app">
    <div class="main">
      <img alt="Vue logo" src="./assets/logo.png">
      <Home/>
      <About/>
    </div>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'

export default {
  name: 'App',
  components: {
    Home,
    About
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/*  样式作用域
    在 vue 组件中 可以书写 <style> 标签来写组件的样式
    如果想要标签内的样式值作用于这个组件的话 可以加上 scoped 属性
    加上之后会在 组件和组件的所有子元素 上生成一个自定义属性，格式为 data-v-hash
    然后编译样式时，通过添加属性选择器来查早拥有这个自定义属性 和相同 hash 值的所有元素
    选择器 [data-v-hash] { css样式 }
*/

/*  样式穿透
    由于组件的样式作用域 Scoped 属性导致样式只作用于当前组件，
    解决方法有两种：
      1. 父组件的样式标签不要加 Scoped属性
        不过这样会导致 样式会作用到项目中所有拥有相同选择器的元素
        可能会导致其他样式被覆盖或出现意料之外的错误，(不推荐)
        tip ：如果硬要这么使用的话建议使用 id 来将样式限制到组件内
      2. 使用深度选择器: 父组件的选择器 >>> 后代组件内元素的选择器 (推荐）
        深度选择器的原理是给父组件添加自定义选择器（data-v-hash) 子组件就不再添加 这样可以样式限制到这个组件和其后代组件中
      3. 父组件 子组件 样式 同时添加 scoped 属性
        补充：
          1. 就算样式标签为空，只要添加了 scoped 属性，组件的根元素就会添加一个自定义属性
          2. 如果父组件子组件都添加了 scoped 那么子组件根元素会有两个自定义属性，hash值不一样
          3. 如果子组件同时拥有 两个及以上的自定义属性 那么样式可以会出现冲突，权重大的覆盖权重低的
             所以样式穿透功能须谨慎慎用！！！
*/
.main >>> .content {
  color: pink;
}

</style>
